<template>
    <el-breadcrumb separator="/" style="margin-bottom: 20px;" v-if="breadcrumbs.length > 0">
        <el-breadcrumb-item>当前位置：</el-breadcrumb-item>
        <el-breadcrumb-item v-for="(item,index) in breadcrumbs" :key="index">
            <template v-if="index < breadcrumbs.length -1">
                <a :href="item.path" @click.prevent="navigate(item,index)">{{item.title}}</a>
            </template>
            <template v-else>{{item.title}}</template>
        </el-breadcrumb-item>
    </el-breadcrumb>
</template>

<script>

    export default {
        name: 'Breadcrumb',
        mounted() {
        },
        data(){
            return {
                // item={path:'',replace:Boolean,reset:Boolean,title:''}
                breadcrumbs:[]
            }
        },
        methods:{
            navigate(item){
                this.$route.meta.reset = !!item.reset
                this.$route.meta.replace = !!item.replace
                // 点击面包屑，设置目标路由缓存
                this.$route.meta.nextKeepalive = true
                if(item.replace){
                    this.$router.replace(item.path)
                }else{
                    this.$router.push(item.path)
                }
            }
        },
        watch:{
            $route(to,from){
                let commonNav = ''
                if(window.mfe){
                    commonNav = window.mfe_nav_router_base_path.commonNav
                }else{
                    // common-nav登录成功后选择应用后设置的导航路径
                    commonNav = '/common-nav'
                }
                if(this.breadcrumbs.length > 0){

                    if(commonNav == to.path || '/' == to.path || from.meta.reset){
                        // 清空数组
                        this.breadcrumbs.splice(0)
                    }else{
                        //如果去向路由是面包屑中的路径，则将面包屑后面的数据清除
                        let isInclude = false
                        for(let i = 0;i < this.breadcrumbs.length; i++){
                            if(to.path == this.breadcrumbs[i].path){
                                this.breadcrumbs.splice(i)
                                isInclude = true
                                break
                            }
                        }
                        if(!isInclude && to.meta.root){
                            this.breadcrumbs.splice(0)
                        }
                    }
                }

                //暂时没什么作用以后研究 todo
                // 缓存判断
                if(from.meta.nextKeepalive){
                    to.meta.keepalive = true
                    from.meta.nextKeepalive = false
                }
                if(to.meta && to.meta.title && to.meta.breadcrumb !== false){
                    this.breadcrumbs.push(
                        {
                            path:to.path,
                            title:to.meta.title,
                            replace: false,//点击面包屑的时候是路由push还是replace
                            reset:false// 面包屑数据是否清空重置，一般点击一个根路由时设置为重置
                        }
                    )
                }
            }
        }
    }
</script>

